<template>
  <div class="t-item">
    <input
      type="checkbox"
      v-model="myCompleted"
      @change="valueChange"
    >
    <span @click="linkTo" :class="{completed: myCompleted}">
      {{ text }}
    </span>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props: {
    text: {
      type: String,
      required: true,
    },
    completed: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      required: true,
    },
    id: {
      type: String,
      default: null
    },
  },
  data() {
    return {
      myCompleted: this.completed
    }
  },
  methods: {
    linkTo() {
      console.log(this.id)
      this.$router.push({
        name: 'TodoListShow',
        params: {
          id: this.id
        }
      })
    },
    valueChange() {
      this.$emit('emit-checked', {
        id: this.id,
        completed: this.myCompleted
      })
    }
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}

.red {
  color: red;
}
</style>